﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ClassCenter.aspx.cs" Inherits="NX5Web.admin.ClassData.ClassCenter" %>


<div id="subApp" style="margin:15px;"> 


    <el-dialog
  v-model="dialogVisible"
  title="课程设置"
  width="500" 
>
  <div>
      <el-form ref="form" :model="form" :rules="rules" label-width="auto" style="max-width: 600px">
          <el-form-item v-if="mode=='new'" label="选择学生"  prop="StudentAccountId">
            <el-select v-model="form.StudentAccountId" @change="changeStu">
              <el-option v-for="(item,index) in StudentList" :label="item.StudentName" :value="item.AccountId"></el-option>  
            </el-select>
          </el-form-item> 
          <el-form-item label="选择老师"  prop="TeacherId">
              <el-cascader v-model="form.TeacherId" :options="TeacherList" style="width:100%;"/>
            </el-form-item> 
          <el-form-item v-if="mode=='new'" label="体验课" prop="IsTaste">
              <el-checkbox v-model="form.IsTaste" label="是否设置体验课" />
            </el-form-item> 
          <el-form-item v-if="mode=='new'" label="课程类型"  prop="LessType">
            <el-select v-model="form.LessType">
              <el-option label="常规课" value="1"></el-option> 
              <el-option label="保温课" value="2"></el-option> 
            </el-select>
          </el-form-item> 
          <el-form-item label="课程时间"  prop="LessTime">
            <el-date-picker v-model="form.LessTime" type="datetime" placeholder="选择上课时间"/>
          </el-form-item>  
          <el-form-item label="会议链接"  prop="RoomLink">
              <el-input v-model="form.RoomLink" type="datetime" placeholder="腾讯会议链接"/>
            </el-form-item>  
          <el-form-item label="房间号"  prop="RoomNo">
              <el-input v-model="form.RoomNo" type="datetime" placeholder="房间号"/>
            </el-form-item>  
          <el-form-item label="会议密码"  prop="RoomPwd">
            <el-input v-model="form.RoomPwd" type="datetime" placeholder="密码"/>
          </el-form-item>
      </el-form>
  </div>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="AddLess()">
        确 定
      </el-button>
    </div>
  </template>
</el-dialog>



    <div style="    width: 100%;border-bottom: 1px solid #eee;padding-bottom: 5px;">
        <el-button type="primary" @click="showAddDia()">添 加</el-button>  
    </div>
    <div style="margin-top:10px;">
        <el-form :inline="true" :model="filterform" ref="filterform"> 
            <el-form-item label="学生姓名" prop="Name">
                <el-input v-model="filterform.Name" placeholder="请输入姓名"></el-input>
            </el-form-item> 
            <el-form-item label="日期" prop="SBRANG">
                <el-date-picker
                    v-model="filterform.SBRANG"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期" 
                />
            </el-form-item> 
            <el-form-item label="课程类型" prop="LessType">
                 <el-select v-model="filterform.LessType" style="width:100px;">
                        <el-option label="常规课" value="1"></el-option> 
                        <el-option label="保温课" value="2"></el-option> 
                 </el-select>
            </el-form-item> 
            <el-form-item label="教练" prop="Teacher">    
                <el-input v-model="filterform.Teacher" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="Status">
                 <el-select v-model="filterform.Status" style="width:100px;">
                        <el-option label="已预约" value="1"></el-option> 
                        <el-option label="已确认" value="2"></el-option> 
                        <el-option label="已取消" value="3"></el-option> 
                        <el-option label="进行中" value="4"></el-option> 
                        <el-option label="未评价" value="5"></el-option> 
                        <el-option label="已完成" value="6"></el-option> 
                 </el-select>
            </el-form-item> 
            <el-form-item label="体验课" prop="IsTaste">
                <el-select v-model="filterform.IsTaste" style="width:100px">
                      <el-option label="全部" :value="0"></el-option>
                      <el-option label="是" :value="1"></el-option>
                      <el-option label="否" :value="2" ></el-option>
                  </el-select>
            </el-form-item> 
            <el-form-item label="上传回放" prop="Uploaded">
                <el-select v-model="filterform.Uploaded" style="width:100px">
                      <el-option label="全部" :value="0"></el-option>
                      <el-option label="已上传" :value="1"></el-option>
                      <el-option label="未上传" :value="2" ></el-option>
                  </el-select>
            </el-form-item> 
            <el-form-item label="审核状态" prop="Approved">
                <el-select v-model="filterform.Approved" style="width:100px">
                      <el-option label="全部" :value="0"></el-option>
                      <el-option label="已审核" :value="1"></el-option>
                      <el-option label="未审核" :value="2" ></el-option>
                  </el-select>
            </el-form-item> 

            <el-form-item label="申报状态" prop="Paid">
                <el-select v-model="filterform.Paid" style="width:100px">
                      <el-option label="全部" :value="0"></el-option>
                      <el-option label="已申报" :value="1"></el-option>
                      <el-option label="未申报" :value="2" ></el-option>
                  </el-select>
            </el-form-item> 
             
             <el-form-item>
              <el-button type="primary" @click="resetFilter">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div style="">
        <el-table :data="tableData" style="width: 100%">
           <%--<el-table-column type="selection" width="55" ></el-table-column>--%>
           <el-table-column label="标题">
             <template #default="scope">{{ scope.row.Title }}</template>
           </el-table-column>
                        <el-table-column label="学生" width="100" >
    <template #default="scope">{{ scope.row.StudentName }}</template> 
</el-table-column>
                        <el-table-column label="老师"  width="100">
    <template #default="scope">{{ scope.row.TeacherName }}</template> 
</el-table-column>
           <el-table-column label="时间"  width="200">
               <template #default="scope">{{ scope.row.StudyDay }} {{ scope.row.StartTime }}-{{ scope.row.EndTime }}</template> 
           </el-table-column>
            
                                    <el-table-column label="类型"  width="90">
    <template #default="scope">{{ scope.row.LessonTypeText }}</template> 
</el-table-column>
                                                <el-table-column label="体验课"  width="90">
    <template #default="scope">{{ scope.row.IsTaste?'是':'否' }}</template> 
</el-table-column>
                                                <el-table-column label="状态"  width="90">
    <template #default="scope">{{ scope.row.StatusTitle }}</template> 
</el-table-column>
                                                            <el-table-column label="结算价"  width="90">
    <template #default="scope">¥ {{ scope.row.FeeRMB }}</template> 
</el-table-column>
                                                            <el-table-column label="申报结算"  width="90">
    <template #default="scope">{{ scope.row.Paid?'已申报':'未申报' }}</template> 
</el-table-column>
                                                            <el-table-column label="回放"  width="90">
    <template #default="scope">
        <el-link v-if="scope.row.Video != null" :href="scope.row.Video" target="_blank" style="color: #000;">回放</el-link>
        <div v-else>未上传</div>
    </template> 
</el-table-column>
                                                            <%--<el-table-column label="课程密码"  width="180">
    <template #default="scope">{{ scope.row.RoomPwd }}</template> 
</el-table-column>--%>
             
           <el-table-column widt="80">
              <template #default="scope"> 
                  
                 {{scope.row.Detail}}

                  <el-button size="small" type="info" v-if="scope.row.Status>4">
                      <el-link :href="'/h5/pages-study/study/modules/step-final-result?LessonId='+ scope.row.UUID +'&Type=view&isreview=0'" target="_blank" style="color: #fff;">详情</el-link>
                  </el-button>
                  
                  <el-button  v-if="scope.row.Status<=2" size="small" type="danger" @click="changeLes(scope.$index, scope.row)">调课</el-button>
                  <el-button  v-if="scope.row.Approved && !scope.row.Paid" size="small" type="danger" @click="chagneApprove(scope.$index, scope.row,false)">拒审</el-button>
                  <el-button  v-if="!scope.row.Approved && scope.row.Status>4" size="small" type="success" @click="chagneApprove(scope.$index, scope.row,true)">过审</el-button>
              </template>
            </el-table-column>
        </el-table>

        <div style="margin-top:10px;">
            <el-pagination
              v-model:current-page="pageIndex"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 40]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              @size-change="pageSizeChange"
              @current-change="pageNumberChange"
            />
        </div>
    </div> 
</div>
<script>
    var subApp = createApp({
        el: '#subApp',
        data() {
            return {
                form: {
                    StudentAccountId: null,
                    TeacherId: null,
                    LessType: null,
                    LessTime: null,
                    IsTaste: false,
                    RoomLink: null,
                    RoomNo: null,
                    RoomPwd:''
                },
                filterform: {
                    Name: null,
                    SBRANG: null,
                    LessType: null,
                    Teacher: null,
                    Status: null,
                    IsTaste: 0,
                    Paid: 0,
                    Approved: 0,
                    Uploaded:0

                },
                rules: {
                    StudentAccountId: [
                        { required: true, message: '', trigger: 'change' }
                    ],
                    RoomLink: [
                        { required: true, message: '', trigger: 'change' }
                    ],
                    RoomNo: [
                        { required: true, message: '', trigger: 'change' }
                    ],
                    TeacherId: [
                        { required: true, message: '', trigger: 'change' }
                    ],
                    LessType: [
                        { required: true, message: '', trigger: 'change' }
                    ], 
                    LessTime: [
                        { type: 'date', required: true, message: '', trigger: 'blur' }
                    ],
                },
                dialogVisible: false,
                LessonList: [],
                StudentList: [],
                TeacherList: [],
                mode: 'new',
                ActiveItem: null,
                totalCount: 0,
                pageIndex: 1,
                pageSize: 10,
            };
        },
        computed: {
            tableData() {
                var start = null;
                var end = null;
                if (this.filterform.SBRANG != null) {
                    start = this.filterform.SBRANG[0];
                    end = new Date(this.filterform.SBRANG[1].toString());
                    end = new Date(end.setDate(end.getDate() + 1));
                }
                console.log(this.filterform.Uploaded);
                var temp = this.LessonList.filter(x => {
                    return (
                        (this.filterform.Name == null || x.StudentName.indexOf(this.filterform.Name) != -1)
                        && (this.filterform.SBRANG == null || ((new Date(x.StudyDay) >= start && new Date(x.StudyDay) <= end)))
                        && (this.filterform.Teacher == null || x.TeacherName.indexOf(this.filterform.Teacher) != -1)
                        && (this.filterform.LessType == null || x.LessonType == this.filterform.LessType)
                        && (this.filterform.Status == null || x.Status == this.filterform.Status)
                        && (this.filterform.IsTaste == 0 || x.IsTaste == (this.filterform.IsTaste==1?true:false))
                        && (this.filterform.Approved == 0 || x.Approved == (this.filterform.Approved == 1 ? true : false))
                        && (this.filterform.Paid == 0 || x.Paid == (this.filterform.Paid == 1 ? true : false))
                        && (
                            this.filterform.Uploaded == 0 || (this.filterform.Uploaded == 1 ? (x.Video != null) : (x.Video == null)))
                    );
                });
                this.totalCount = temp.length;

                return temp.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);
            }
        },
        methods: { 
            resetFilter() {
                this.$refs.filterform.resetFields()
            },
            pageNumberChange(pageIndex) {
                this.pageIndex = pageIndex;
            },
            pageSizeChange(pageSize) {
                this.pageIndex = 1;
                this.pageSize = pageSize;
            },
            chagneApprove(index, row, approved) {
                if (window.confirm('是否确定该操作?')) {
                    loaddingPlus(true);
                    ktlapi({
                        "action": "ApproveLesson",
                        "data": {
                            "ID": row["ID"],
                            "Approved": approved?1:0
                        }
                    }).then(res => {
                        row["Approved"] = approved;
                        loaddingPlus(false); 
                    });
                }
            },
            changeLes(index,row) { 
                this.ActiveItem = row;
                console.log(row);
                this.form.TeacherId = row["TeacherId"];
                this.form.LessTime = row["StudyDay"] + ' ' + row["StartTime"];
                this.form.RoomLink = row["RoomLink"];
                this.form.RoomNo = row["RoomNo"]; 
                this.form.RoomPwd = row["RoomPwd"];
                this.mode = 'edit';
                this.dialogVisible = true;
            },
            changeStu() { 
                this.form.TeacherId = this.StudentList.filter(x => {
                    return x.AccountId == this.form.StudentAccountId
                })[0]["DefaultTeacherId"];
            },
            AddLess() {
                const that = this;  

                if (that.form.RoomLink != null) {
                    if (!that.form.RoomLink.startsWith('https://')) {
                        MsgBox("房间链接必须https开头");
                        return;
                    }
                    
                }

                this.$refs.form.validate((valid, fields) => {
                    if (valid) {

                        var proc = '';
                        var data = {};
                        if (this.mode == 'new') {
                            proc = 'Cus_StudentPerLes_SP';
                            data = {
                                StudentAccountId: that.form.StudentAccountId,
                                TeacherId: typeof (that.form.TeacherId) == 'number' ? that.form.TeacherId : that.form.TeacherId[1],
                                StudyDay: dateFormat(that.form.LessTime, "yyyy-MM-dd"),
                                StartTime: dateFormat(subApp.form.LessTime, "HH:mm:00"),
                                LessonType: that.form.LessType, 
                                IsTaste: that.form.IsTaste ? 1 : 0,
                                RoomLink: that.form.RoomLink,
                                RoomNo: (that.form.RoomNo == null ? '' : that.form.RoomNo.replace(/-/g, '')),
                                RoomPwd: that.form.RoomPwd == null ? '' : that.form.RoomPwd
                            }
                        } else {
                            proc = 'Cus_StudentPerLes_SPEdit';
                            data = {
                                UUID: that.ActiveItem.UUID,
                                TeacherId: typeof (that.form.TeacherId) == 'number' ? that.form.TeacherId : that.form.TeacherId[1],
                                StudyDay: dateFormat(that.form.LessTime, "yyyy-MM-dd"),
                                StartTime: dateFormat(subApp.form.LessTime, "HH:mm:00"),
                                RoomLink: that.form.RoomLink,
                                RoomNo: (that.form.RoomNo == null ? '' : that.form.RoomNo.replace(/-/g, '')),
                                RoomPwd: that.form.RoomPwd == null ? '' : that.form.RoomPwd
                            }
                        }

                        loaddingPlus(true);
                        ktlapi({ 
                            "action": proc,
                            "data": data
                        }).then(res => {
                            if (res.data[0]["code"] == 0) {
                                MsgBox.error(res.data[0]["msg"]);
                                return;
                            }
                            this.$refs.form.resetFields();
                            this.dialogVisible = false;
                            loaddingPlus(false); 
                            that.loadData();
                        });

                    } else {
                        console.log('input error');
                    }
                });
            },
            goreport(index, row) {
                window.open('/h5/pages-study/study/modules/step-final-result?LessonId='+ row["UUID"] +'&Type=view&isreview=0');
            },
            showAddDia() {
                this.dialogVisible = true;
                this.mode = 'new';
            },
            loadData() {
                loaddingPlus(true);
                var user = new ktluser();
                ktlapi({
                    "apiurl": OT.CommandSet,
                    "action": "Cus_CompanyAllLessons",
                    "data": {
                        CompanyId: user.userInfo().CompanyId
                    }
                }).then(res => {
                    this.LessonList = res.data.tables[0].table;
                    this.StudentList = res.data.tables[2].table;
                    this.TeacherList = res.data.tables[3].table;
                    this.TeacherList = pivotJson(this.TeacherList, "CompanyId", ["CompanyId", "CompanyName"]);
                    for (var i = 0; i < this.TeacherList.length; i++) {
                        this.TeacherList[i]["value"] = this.TeacherList[i]["CompanyId"];
                        this.TeacherList[i]["label"] = this.TeacherList[i]["CompanyName"];
                        this.TeacherList[i]["children"] = this.TeacherList[i]["items"];
                    }
                    console.log("this.TeacherList",this.TeacherList)
                    loaddingPlus(false);
                });
            },
            init() { 
                this.loadData();
            }
        },
        mounted: function () {
            this.init();
        }
    });
</script>